<template xmlns="http://www.w3.org/1999/html">
  <div>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="550px" :close-on-click-modal="false" style="margin-top: 150px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".zip"
        :headers="upload.headers"
        :action="upload.url + '?institutionCode=' + this.institutionCode"
        :disabled="upload.isUploading"
        :before-upload="handleBeforeUpload"
        :on-progress="handleUploadProgress"
        :on-success="handleSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__text" style="color: #dcdfe6">压缩文件大小不要超过25M</div>
        <div class="el-upload__tip text-left" slot="tip">
          <span style="color: red">1.仅允许导入zip格式文件;<br></span>
          <span style="color: red">2.上传的照片请用人员身份证号命名,否则无法匹配,如果身份证号带X请用大写字母命名;<br></span>
          <span style="color: red">3.身份证正面(头像)图片,身份证号+英文减号+数字1命名,例：61011019450108151X-1.png;<br></span>
          <span style="color: red">4.身份证背面(国徽)图片,身份证号+英文减号+数字2命名,例：61011019450108151X-2.png;<br></span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导入结果对话框 -->
    <el-dialog :title="result.title" :visible.sync="result.open" width="600px" append-to-body>
      <el-form label-width="68px">
        <el-form-item label="状态">
          <el-select v-model="result.select" placeholder="请选择" @change="handleResultOnChange">
            <el-option
              v-for="item in result.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="result.rows" :height="resultTableHeight" highlight-current-row>
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="内容" align="center" prop="content" width="400" show-overflow-tooltip />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.status=='success'" type="success" icon="el-icon-check" circle></el-button>
            <el-button size="mini" v-if="scope.row.status=='error'" type="danger" icon="el-icon-close" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="result.open = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getToken} from "@/utils/auth";

  export default {
    name: "cardZip",
    props: {
      // 大小限制(MB)
      fileSize: {
        type: Number,
        default: 25,
      }
    },
    data() {
      return {
        resultTableHeight: window.innerHeight - 400,
        institutionCode: null,
        upload: {
          // 是否显示弹出层
          open: false,
          // 弹出层标题
          title: "批量上传身份证",
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: { token: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/labour/staff/cardZipUpload"
        },
        // 导入结果参数
        result: {
          open: false,
          title: "",
          rows: [],
          temp: [],
          select: 'error',
          options: [{
            value: 'all',
            label: '全部'
          },{
            value: 'error',
            label: '异常'
          },{
            value: 'success',
            label: '正常'
          }]
        },
      }

    },
    methods: {
      show(institutionCode) {
        this.result.rows = [];
        this.result.temp = [];
        this.result.select = 'error';
        this.institutionCode = institutionCode;
        this.upload.open = true;
      },
      // 文件上传中处理
      handleUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 上传前loading加载
      handleBeforeUpload(file) {
        if (this.fileSize) {
          const isLt = file.size / 1024 / 1024 < this.fileSize;
          if (!isLt) {
            this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
            return false;
          }
        }
      },
      // 文件上传成功处理
      handleSuccess(response, file, fileList) {
        this.$loading().close();
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        if (response.rows != undefined) {
          this.result.temp = response.rows;
          response.rows.forEach(e => {
            if (e.status == 'error') {
              this.result.rows.push(e);
            }
          });
        }
        this.$parent.getList();
        this.$confirm(response.msg, '导入结果', {
          showCancelButton: true,
          showConfirmButton: response.rows != undefined,
          confirmButtonText: '详情',
          cancelButtonText: '取消',
          type: response.status
        }).then(() => {
          this.result.title = "查看导入详情";
          this.result.open = true;
        }).catch(() => {
        });
      },
      // 提交上传文件
      submitFileForm() {
        this.$loading({
          lock: true,
          text: '身份证上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$refs.upload.submit();
      },
      // 导入结果状态发生改变
      handleResultOnChange() {
        if (this.result.select == 'all') {
          this.result.rows = this.result.temp;
        } else if (this.result.select == 'error') {
          this.result.rows = [];
          this.result.temp.forEach(e => {
            if (e.status == 'error') {
              this.result.rows.push(e);
            }
          });
        } else if (this.result.select == 'success') {
          this.result.rows = [];
          this.result.temp.forEach(e => {
            if (e.status == 'success') {
              this.result.rows.push(e);
            }
          });
        }
      },
    }
  }
</script>
